<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">
                <!-- <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="phone" placeholder="请输入手机号" clearable size="small" style="width: 350px "
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="name" placeholder="请输入姓名" clearable size="small" style="width: 350px"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form> -->

                <el-row :gutter="10" class="mb8">

                    <el-col :span="1.5">
                        <!-- <el-select v-model="noScheduleDriverId" placeholder="请选择" @change="handleNoScheduleDriverChange">
                <el-option v-for="item in noScheduleDriverList" :key="item.noScheduleDriverId" :label="item.nameAndPhone"
                  :value="item.noScheduleDriverId">
                </el-option>
              </el-select> -->
                        <el-button type="primary" plain icon="el-icon-edit" size="mini"
                            @click="handleAttendance">考勤</el-button>
                        <el-button type="primary" plain icon="el-icon-edit" size="mini"
                            @click="askForLeave">请假</el-button>
                    </el-col>
                </el-row>

                <el-table :data="schduleList" border style="width: 100%">
                    <!-- <el-table-column fixed prop="driverName" label="姓名-手机号" width="150"></el-table-column> -->
                    <el-table-column prop="one" label="1号" width="60">
                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.one)">{{ scope.row.one }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="two" label="2号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.two)">{{ scope.row.two }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="three" label="3号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.three)">{{ scope.row.three }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="four" label="4号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.four)">{{ scope.row.four }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="five" label="5号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.five)">{{ scope.row.five }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="six" label="6号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.six)">{{ scope.row.six }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="seven" label="7号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.seven)">{{ scope.row.seven }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="eight" label="8号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.eight)">{{ scope.row.eight }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nine" label="9号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.nine)">{{ scope.row.nine }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ten" label="10号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.ten)">{{ scope.row.ten }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="eleven" label="11号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.eleven)">{{ scope.row.eleven }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twelve" label="12号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twelve)">{{ scope.row.twelve }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="thirteen" label="13号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.thirteen)">{{ scope.row.thirteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fourteen" label="14号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.fourteen)">{{ scope.row.fourteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fifteen" label="15号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.fifteen)">{{ scope.row.fifteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sixteen" label="16号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.sixteen)">{{ scope.row.sixteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="seventeen" label="17号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.seventeen)">{{ scope.row.seventeen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="eighteen" label="18号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.eighteen)">{{ scope.row.eighteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nineteen" label="19号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.nineteen)">{{ scope.row.nineteen }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twenty" label="20号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twenty)">{{ scope.row.twenty }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyOne" label="21号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyOne)">{{ scope.row.twentyOne }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyTwo" label="22号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyTwo)">{{ scope.row.twentyTwo }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyThree" label="23号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyThree)">{{ scope.row.twentyThree }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyFour" label="24号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyFour)">{{ scope.row.twentyFour }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyFive" label="25号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyFive)">{{ scope.row.twentyFive }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentySix" label="26号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentySix)">{{ scope.row.twentySix }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentySeven" label="27号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentySeven)">{{ scope.row.twentySeven }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyEight" label="28号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyEight)">{{ scope.row.twentyEight }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="twentyNine" label="29号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.twentyNine)">{{ scope.row.twentyNine }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="thirty" label="30号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.thirty)">{{ scope.row.thirty }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="thirtyOne" label="31号" width="60">

                        <template slot-scope="scope">
                            <span :style="getCellStyle(scope.row.thirtyOne)">{{ scope.row.thirtyOne }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="60">
  
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" @click="handleUpdate(scope.row)" size="small">编辑</el-button>
              </template>
            </el-table-column> -->
                </el-table>
            </el-col>
        </el-row>
        <el-pagination :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" :page-sizes="[2, 4, 6, 8]" :current-page.sync="queryParams.pageNum"
            @current-change="handleCurrentChange" @size-change="handleCurrentChange" />









        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="请假时间" prop="leaveDate">
                            <el-input v-model="form.leaveDate" placeholder="请输入请假时间" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="请假原因" prop="leaveRemark">
                            <el-input v-model="form.leaveRemark" placeholder="请输入请假原因" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import { searchScheduleByToken, newAttendance, newDriverLeave, getScheduleById, addSchedule, selectNoScheduleDriverList } from '@/api/system/schedule'

export default {
    name: 'User',
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 2,

            },
            rules: {
                leaveDate: [
                    { required: true, message: '请假时间不能为空', trigger: 'blur' }
                ],
                leaveRemark: [
                    { required: true, message: '请假原因不能为空', trigger: 'blur' }
                ],

            },
            noScheduleDriverList: [],
            title: '',
            // 是否显示弹出层
            open: false,
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 选中数组
            ids: [],
            // 表单参数
            form: {},
            phone: "",
            name: "",
            noScheduleDriverId: '',
            nameAndPhone: '',
            schduleList: []
        }
    },
    watch: {},
    created() {
        this.search(this.phone, this.name, 1, this.queryParams.pageSize);
        this.selectNoScheduleDriverList();
    },
    methods: {
        askForLeave() {
            this.reset();
            this.title = "请假";
            this.open = true;
        },
        handleClick(row) {
            console.log(row);
        },
        getCellStyle(value) {
            const style = {};

            if (value === '白班') {
                style.backgroundColor = 'lightgreen';
            } else if (value === '请假') {
                style.backgroundColor = 'yellow';
            } else if (value === '旷工') {
                style.backgroundColor = 'lightcoral';
            } else if (value === '休息') {
                style.backgroundColor = 'lightgray';
            } else if (value === '晚班') {
                style.backgroundColor = 'lightblue';
            }
            return style;
        },
        handleAttendance() {
            this.$confirm('是否进行考勤?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                newAttendance()
                    .then(response => {
                        // 根据返回结果进行条件判断
                        if (response === '考勤成功') {
                            this.$message({
                                type: 'success',
                                message: '考勤成功!'
                            });
                        } else if (response === '今天已经进行过考勤，不能重复考勤') {
                            this.$message({
                                type: 'warning',
                                message: '今天已经进行过考勤，不能重复考勤'
                            });
                        } else if (response === '今天不出勤，无需考勤') {
                            this.$message({
                                type: 'warning',
                                message: '今天不出勤，无需考勤'
                            });
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消考勤'
                });
            });
        },




        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.loading = true;
            this.search(this.phone, this.name, 1, this.queryParams.pageSize);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        licenseCancel() {
            this.licenseOpen = false
            this.licenseReset()
        },
        handleCurrentChange() {
            this.searchScheduleList(this.phone, this.name, this.queryParams.pageNum, this.queryParams.pageSize);

        },
        /** 查询排班列表 */
        search() {
            this.loading = true;
            searchScheduleByToken().then((response) => {
                this.schduleList = response.rows; // 赋值数据
            }).catch((error) => {
                console.error(error);
                this.loading = false;
            });
        },
        selectNoScheduleDriverList() {
            this.loading = true;
            selectNoScheduleDriverList().then((response) => {
                this.noScheduleDriverList = response; // 赋值数据
                this.total = 3;
                this.loading = false;
            }).catch((error) => {
                console.error(error);
                this.loading = false;
            });
        },
        // 根据选择器的值更新 nameAndPhone
        handleNoScheduleDriverChange() {
            const selectedDriver = this.noScheduleDriverList.find(driver => driver.noScheduleDriverId === this.noScheduleDriverId);
            this.nameAndPhone = selectedDriver ? selectedDriver.nameAndPhone : '';
        },
        handleAdd() {
            this.loading = true;
            addSchedule(this.noScheduleDriverId, this.nameAndPhone)
                .then(() => {
                    location.reload();
                });
        },
        // 表单重置
        reset() {
            this.form = {
                leaveDate: undefined,
                leaveRemark: undefined,
            }

            this.resetForm('form');
        },

        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.open = false;
                    newDriverLeave(this.form.leaveDate, this.form.leaveRemark).then((response) => {
                        if (response === "请假时间不能小于当前时间") {
                            this.$modal.msgError('请假时间不能小于当前时间');
                        } else {
                            this.$modal.msgSuccess('请假成功，等待审核');
                        }
                        this.open = false;
                    });
                }
            });
        },
    }
}
</script>